import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import MyNavLink from '../../../component/MyNavLink'
import Detail from './Detail'

export default class Message extends Component {
  state = {
    messageArr: [
      {id: '01', title: '消息1'},
      {id: '02', title: '消息2'},
      {id: '03', title: '消息3'}
    ]
  }
  render() {
    return (
      <div>
          <ul>
            {this.state.messageArr.map(w => {
              return (
                <li key={w.id}>
                  {/* 向路由组件传递params参数 */}
                  <MyNavLink to={`/home/message/detail/${w.id}/${w.title}`}>{w.title}</MyNavLink>
                </li>
              )
            })}
          </ul>
          <div>
            {/* 声明接收params参数 */}
            <Route path='/home/message/detail/:id/:title' component={Detail} />
          </div>
      </div>
    )
  }
}
